<style>
    table th, table td{
        text-align: center !important;
    }
    .page-content .portlet .portlet-search-body .search-item{
        width: 15%;
    }
    .rounded{
        border-top-left-radius: 4px !important;
        border-bottom-left-radius: 4px !important;
        border-top-right-radius: 4px !important;
        border-bottom-right-radius: 4px !important;
    }
    .key{
        width: 100px;
        text-align: right;
    }
    .value{
        width: 120px;
    }
    div .modal-body{
        padding-top: 0px !important;
    }
    .current{
        color: red;
    }
</style>

<div class="portlet">
    <div class="portlet-actions">
        <button class="btn blue btn-sm rounded" ng-click="grid.add()"><i class="fa fa-plus"></i> 新增</button>
    </div>
    <form class="portlet-search-body" name="queryForm">

		<input type="text" class="form-control search-item search-item-expand" ng-model="assetCode" placeholder="资产编码">
        <input type="text" class="form-control search-item" ng-model="assetName" placeholder="资产名称">
        <input type="text" class="form-control search-item" ng-model="assetClass" placeholder="资产类别">
        <select class="form-control search-item" ng-model="type" ng-options="opt.value as opt.name for opt in options.assettype">
            <option value="" disabled selected hidden>-- 资产类型 --</option>
        </select>

        <div class="input-group input-large date-picker input-daterange" ed-date-picker style="float: left;margin-right: 10px;">
            <input type="text" class="form-control" ng-model="purchaseDateStart" placeholder="采购时间(开始)">
            <span class="input-group-addon">- </span>
            <input type="text" class="form-control" ng-model="purchaseDateEnd" placeholder="采购时间(截止)">
        </div>

        <div class="search-item">
            <button class="btn btn-icon-only default"><i class="fa fa-chevron-right"></i></button>
            <button class="btn btn-sm query rounded" ng-click="query();"><i class="fa fa-search"></i> 查询</button>
            <button class="btn btn-sm reset rounded" ng-click="reset();"><i class="fa fa-eraser"></i> 重置</button>
        </div>
    </form>
    <div class="portlet-body">
        <table ed-grid="grid"  class="table table-striped table-bordered table-advance table-hover"
               data-options="url: 'asset/query.do', modelText: 'xx列表', form: 'queryForm', modal: 'modal'">
            <thead>
            <tr>
                <th data-options="field: '_index'"></th>
                <th data-options="field: 'assetCode'">资产编码</th>
                <th data-options="field: 'assetName'">资产名称</th>
                <th data-options="field: 'assetClass'">资产类别</th>
                <th data-options="field: 'type | code : assettype'">资产类型</th>
                <th data-options="field: 'model'">资产型号</th>
                <th data-options="field: 'num'">资产数量</th>
                <th data-options="field: 'purchaseDate | limitTo : 10'">采购时间</th>
                <th data-options="field: 'userName'">使用人</th>
                <th data-options="field: 'deptName'">使用部门</th>
                <th data-options="field: 'location'">使用位置</th>
                <th data-options="field: 'useDate | limitTo : 10'">使用时间</th>
                <th data-options="field: 'remark'">备注</th>
                <th>操作</th>
            </tr>
            </thead>
        </table>
    </div>
</div>

<div ed-modal="modal" data-options="title: 'xxxx', static: true, width: 720, defaultButton:false,onHidden:'reset'">
    <form action="#" class="form-horizontal w5c-form" w5c-form-validate novalidate name="validateForm">
        <div class="form-body">
            <div class="rounded" style="border:1px solid #ececec; padding: 10px 10px 0px 10px;">
                <div class="form-group">
                    <label class="col-md-2 control-label"><span style="color:red">* </span>资产编码</label>
                    <div class="col-md-4">
                        <input type="text" class="form-control" name="assetCode" ng-model="asset.assetCode" required>
                    </div>
                    <label class="col-md-2 control-label"><span style="color:red">* </span>资产名称</label>
                    <div class="col-md-4">
                        <input type="text" class="form-control" name="assetName" ng-model="asset.assetName" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">资产类别</label>
                    <div class="col-md-4">
                        <input type="text" class="form-control" name="assetClass" ng-model="asset.assetClass">
                    </div>
                    <label class="col-md-2 control-label"><span style="color:red">* </span>资产类型</label>
                    <div class="col-md-4">
                        <select class="form-control" name="type" ng-model="asset.type"
                                ng-options="opt.value as opt.name for opt in options.assettype" required>
                            <option value="" disabled selected hidden>-- 资产类型 --</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">资产型号</label>
                    <div class="col-md-4">
                        <input type="text" class="form-control" name="model" ng-model="asset.model">
                    </div>
                    <label class="col-md-2 control-label">采购时间</label>
                    <div class="col-md-4">
                        <div class="input-group">
                            <input type="text" class="form-control" ed-date-picker name="purchaseDate" ng-model="asset.purchaseDate">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-md-2 control-label">资产数量</label>
                    <div class="col-md-4">
                        <input type="text" class="form-control" name="num" ng-model="asset.num" pattern="^(0|[1-9][0-9]*)$">
                    </div>
                </div>
            </div>

            <div class="rounded" style="border:1px solid #ececec; padding: 10px 10px 0px 10px; margin-top: 5px;">
                <div class="form-group">
                    <label class="col-md-2 control-label"><span style="color:red">* </span>使用人</label>
                    <div class="col-md-4">
                        <div ed-user-select name="userId" ng-model="asset.userId"></div>
                    </div>
                    <label class="col-md-2 control-label"><span style="color:red">* </span>使用部门</label>
                    <div class="col-md-4">
                        <div ed-combotree data-options="idField: 'deptId', textField: 'deptName', parentIdField: 'parentDeptId', returnId: false, url: 'department/tree.do'"
                             name="deptId" ng-model="asset.deptId" placeholder="请选择部门" required></div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label"><span style="color:red">* </span>使用时间</label>
                    <div class="col-md-4">
                        <div class="input-group">
                            <input type="text" class="form-control" ed-date-picker name="useDate" ng-model="asset.useDate" required>
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        </div>
                    </div>
                    <label class="col-md-2 control-label">使用位置</label>
                    <div class="col-md-4">
                        <input type="text" class="form-control" name="location" ng-model="asset.location">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">备注</label>
                    <div class="col-md-4">
                        <input type="text" class="form-control" name="remark" ng-model="asset.remark">
                    </div>
                </div>
            </div>
        </div>
        <div class="form-actions">
            <button type="button" class="btn default" ng-click="grid.cancel();">
                <i class="fa fa-times"></i> 取消
            </button>
            <button type="button" class="btn blue" w5c-form-submit="grid.save();">
                <i class="fa fa-check"></i> 确定
            </button>
        </div>
    </form>
</div>

<!--异动历史记录-->
<div ed-modal="modalHistory" data-options="title: '异动记录', static: true, width: 720, defaultButton:false,onHidden:'reset'">
    <div class="portlet">
        <div class="portlet-body">
            <!--资产-->
            <form action="#" class="form-horizontal">
                <div class="form-body">
                    <div class="rounded" style="border:1px solid #ececec; padding: 10px 10px 0px 40px; ">
                        <div class="form-group">
                            <label class="col-md-2 key">资产编码 :</label>
                            <div class="col-md-2 value">
                                <span ng-bind="assetSelected.assetCode"></span>
                            </div>
                            <label class="col-md-2 key">资产名称 :</label>
                            <div class="col-md-2 value">
                                <span ng-bind="assetSelected.assetName"></span>
                            </div>
                            <label class="col-md-2 key">资产类别 :</label>
                            <div class="col-md-2 value">
                                <span ng-bind="assetSelected.assetClass"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 key">资产类型 :</label>
                            <div class="col-md-2 value">
                                <span ng-bind="assetSelected.typeName"></span>
                            </div>
                            <label class="col-md-2 key">资产型号 :</label>
                            <div class="col-md-2 value">
                                <span ng-bind="assetSelected.model"></span>
                            </div>
                            <label class="col-md-2 key">资产数量 :</label>
                            <div class="col-md-2 value">
                                <span ng-bind="assetSelected.num"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 key">采购时间 :</label>
                            <div class="col-md-2 value">
                                <span ng-bind="assetSelected.purchaseDate | limitTo : 10"></span>
                            </div>
                            <label class="col-md-2 key">备注 :</label>
                            <div class="col-md-2 value">
                                <span ng-bind="assetSelected.remark"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

            <!--历史-->
            <div class="col-md-12" style="padding: 0px;">
                <table class="table table-striped table-bordered table-advance table-hover">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>使用人</th>
                            <th>使用部门</th>
                            <th>使用时间</th>
                            <th>使用位置</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="assetHistory in assetHistories">
                            <td ng-class="{true: 'current'}[assetHistory.status == 1]">{{$index + 1}}</td>
                            <td ng-class="{true: 'current'}[assetHistory.status == 1]">{{assetHistory.userName}}</td>
                            <td ng-class="{true: 'current'}[assetHistory.status == 1]">{{assetHistory.deptName}}</td>
                            <td ng-class="{true: 'current'}[assetHistory.status == 1]">{{assetHistory.useDate | limitTo : 10}}</td>
                            <td ng-class="{true: 'current'}[assetHistory.status == 1]">{{assetHistory.location}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>
    </div>
</div>
